<template>
  <z-container>
    <z-header height="28px">日期范围选择器</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">dateRange</z-col>
        <z-col :span="8">
          <z-date-picker-split
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </z-date-picker-split>
        </z-col>
      </z-row>
       <z-row :gutter="12">
        <z-col :span="3">dateRange-validate</z-col>
        <z-col :span="8">
           <z-form :model="formData" ref="formData" label-width="80px">
            <z-form-item
              label="日期范围"
              prop="value"
              :rules="[ { required: true, trigger: ['blur', 'change'], validator: checkDate } ] "
            >
              <z-date-picker-split
                v-model="formData.value"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clean="clean"
              >
              </z-date-picker-split>
            </z-form-item>
          </z-form>
        </z-col>
         <z-col :span="2">
            <z-button type="primary" @click="reset" size="mini">重置</z-button>
          </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">dateRange-time</z-col>
        <z-col :span="8">
          <z-date-picker-split
            v-model="value3"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd hh:mm"
          >
          </z-date-picker-split>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">dateRange-time-validate</z-col>
         <z-col :span="8">
          <z-form :model="formData1" ref="formData1" label-width="80px">
            <z-form-item
              label="时间范围"
              prop="value"
              :rules="[ { required: true, trigger: ['blur', 'change'], validator: checkDate } ] "
            >
              <z-date-picker-split
                v-model="formData1.value"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :clean="clean1"
              >
              </z-date-picker-split>
            </z-form-item>
          </z-form>
        </z-col>
         <z-col :span="2">
            <z-button type="primary" @click="reset1" size="mini">重置</z-button>
          </z-col>
      </z-row>
    </z-main>
  </z-container>

</template>
<script>
export default {
  name: 'cTimeRange',
  data() {
    return {
      value1:['',''],
      formData: {
        value: ['', '']
      },
      clean: '',
      value3:['',''],
      formData1: {
        value: ['', '']
      },
      clean1: ''
    }
  },
  methods: {
    checkDate(rule, value, callback) {
      if (value[0] && value[1]) {
        callback()
      } else {
        callback(new Error('请选择日期'))
      }
    },
    reset() {
      this.$refs['formData'].resetFields()
      this.clean = new Date().getTime()
    },
    reset1(){
      this.$refs['formData1'].resetFields()
      this.clean1 = new Date().getTime()
    }
  },
}
</script>